<template>
    <div class="wrap">
        <!-- 头部 -->
        <div class="head">
            <!-- 头图 -->
            <img src="@/assets/imgs/sjkb/img_toptitle@2x.png" alt=""/>
            <!-- 学校名称 -->
            <div class="xyname">{{ xyname }}</div>
            <!-- 平台名称 -->
            <div class="ptname">艺校通智慧校园管理系统</div>
            <!-- 时间 -->
            <div class="toptime">{{ formattedCurrentTime }}</div>
        </div>
        <!-- 中部 -->
        <div class="middle">
            <!-- 上周课程统计 -->
            <div class="szkctj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">上周课程统计</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计列表 -->
                <div class="tj-list">
                    <!-- 统计内容 -->
                    <div class="szkctjd" v-for="item in szkctjData.values">
                        <div class="xq">{{ item.week }}</div>
                        <div
                            class="tjt"
                            :style="`flex:${(item.count / szkctjData.max).toFixed(1)}`"
                        ></div>
                        <div class="tjnum">{{ item.count }}节</div>
                    </div>
                </div>
                <!-- 今日统计 -->
                <div class="tjtd">
                    <div class="tjtdl">
                        <div class="tjtdl-num" :style="{ width: szkctjData.jindu + '%' }"></div>
                    </div>
                    <div class="tjtdr">
                        <div class="tjtdr-num">{{ szkctjData.total }}</div>
                        <div class="tjtdr-title">今日课程统计</div>
                    </div>
                </div>
            </div>
            <!-- 今日琴房信息 -->
            <div class="jrqfxx">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">今日琴房信息</div>
                    <div class="icon-r"></div>
                </div>
                <div class="chat-bgtitle">
                    <div class="bgnum">{{ jrqfxxData.total }}</div>
                    <div class="bgtitle">琴房总数</div>
                </div>
                <!-- 统计内容 -->
                <div class="jrqfxx-chart-box">
                    <div ref="jrqfxxchart" class="jrqfxx-chart"></div>
                </div>
            </div>
            <!-- 今日练琴动态 -->
            <div class="jrlqdt">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">今日练琴动态</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="jrlqdt-chart-box">
                    <div ref="jrlqdtchart" class="jrlqdt-chart"></div>
                </div>
            </div>
            <!-- 今日预约 -->
            <div class="jryy">
                <div class="jrnum">{{ commafy(middleData.jryy) }}</div>
                <div class="jricon">
                    <img src="@/assets/imgs/sjkb/img_blue@2x.png"/>
                </div>
                <div class="jrtitle">今日预约</div>
            </div>
            <!-- 预约3 -->
            <div class="jryy-3">
                <div class="ljsc">
                    <div class="ljnum">
                        {{ commafy(middleData.ljsc) }}
                    </div>
                    <div class="ljicon">
                        <img src="@/assets/imgs/sjkb/img_yellow@2x.png"/>
                    </div>
                    <div class="ljtitle">累计时长</div>
                </div>
                <div class="ywc">
                    <div class="ywcnum">{{ commafy(middleData.ywc) }}</div>
                    <div class="ywcicon">
                        <img src="@/assets/imgs/sjkb/img_purple@2x.png"/>
                    </div>
                    <div class="ywctitle">已完成</div>
                </div>
                <div class="yqx">
                    <div class="yqxnum">{{ commafy(middleData.yqx) }}</div>
                    <div class="yqxicon">
                        <img src="@/assets/imgs/sjkb/img_red@2x.png"/>
                    </div>
                    <div class="yqxtitle">已取消</div>
                </div>
            </div>
            <!-- 地球bg -->
            <div class="dqbg">
                <img src="@/assets/imgs/sjkb/img_centredecoration@2x.png"/>
            </div>
            <!-- 上周练琴统计 -->
            <div class="szlqtj">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">上周练琴统计</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="szlqtj-chart-box">
                    <div ref="szlqtjchart" class="szlqtj-chart"></div>
                </div>
            </div>
            <!-- 最新预约信息 -->
            <div class="zxyyxx">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">最新预约信息</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="zxyyxx-box" ref="yxlist">
                    <div class="zxyyxx-item" v-for="item in zxyyxxData" :key="item.id">
                        <div class="item-icon"></div>
                        <div class="item-text">
                            {{ item.memberName }} 成功预约
                            <span>{{
                                    `${item.buildingName}${item.floor}F-${item.number} ${item.roomTypeName}`
                                }}</span>
                        </div>
                        <div class="item-time">
                            {{ formatTimeRange(item.startTime, item.keepTime) }}
                        </div>
                    </div>
                </div>
            </div>
            <!-- 练琴排行榜 -->
            <div class="lqphb">
                <!-- 统计标题 -->
                <div class="tj-top">
                    <div class="icon"></div>
                    <div class="title">练琴排行榜</div>
                    <div class="icon-r"></div>
                </div>
                <!-- 统计内容 -->
                <div class="lqphb-box">
                    <div
                        class="lqphb-item"
                        v-for="(item, index) in lqphbData"
                        :key="item.id"
                    >
                        <div class="item-index">
                            <img v-if="index < 3" :src="topImgs[index]"/>
                            <span v-if="index > 2">{{ index + 1 }}</span>
                        </div>
                        <div class="item-avatar"><img :src="item.avatar"/></div>
                        <div class="item-name">{{ item.name }}</div>
                        <div class="item-num">
<!--                            {{ (item.totalDuration / 60).toFixed(1) }}小时-->
                            {{ (item.totalDuration) }}分钟
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import dayjs from "dayjs";
import "dayjs/locale/zh-cn"; // 引入中文语言包
import top1Img from "@/assets/imgs/sjkb/icon_top1_normal@2x.png";
import top2Img from "@/assets/imgs/sjkb/icon_top2_normal@2x.png";
import top3Img from "@/assets/imgs/sjkb/icon_top3_normal@2x.png";
import {useDashboardApi} from "@/api/yxt/dashboard";
import {last, map, sortBy, sortedUniq, sum} from "lodash-es";
import {useConfigApi} from "@/api/yxt/config";

const configApi = useConfigApi();
const dashboardApi = useDashboardApi();

// 学校名称
const xyname = ref("正在加载数据...");

// 当前时间
dayjs.locale("zh-cn"); // 设置Day.js的语言环境为中文
const formattedCurrentTime = ref(dayjs().format("YYYY-MM-DD (ddd) HH:mm:ss"));

// 预约列表
const yxlist = ref<HTMLElement | null>(null);
// 滚动相关变量
let scrollTop = 0;
const scrollStep = 0.02; // 控制滚动速度，每帧滚动的距离
const scrollInterval = 1000 / 60; // 60帧每秒
let animationFrameId;
// 开始滚动函数
const startScroll = () => {
    nextTick(() => {
        if (yxlist.value) {
            const container = yxlist.value;
            const maxScrollTop = container.scrollHeight - container.clientHeight;

            // 如果内容高度足够，执行滚动
            if (maxScrollTop > 0) {
                scrollTop += scrollStep * scrollInterval;
                if (scrollTop > maxScrollTop) {
                    scrollTop = 0;
                }
                container.scrollTop = scrollTop;
            }

            animationFrameId = requestAnimationFrame(startScroll);
        }
    });
};
const updateTime = () => {
    formattedCurrentTime.value = dayjs().format("YYYY-MM-DD (ddd) HH:mm:ss");
};

// 中间预约数据
const middleData = ref({
    jryy: 0, //今日预约
    ljsc: 0, //累计时长
    ywc: 0, //已完成
    yqx: 0, //已取消
});

// 上周课程统计数据
const szkctjData = ref({
    values: [],
    total: 0,
    max: 0,
    jindu: 0,
});

//今日琴房信息数据
const jrqfxxData = ref({
    syz: 0,
    kx: 0,
    sdz: 0,
    whz: 0,
    total: 0,
});

// 今日练琴动态数据
const jrlqdtData = ref({
    times: [], //横坐标数据
    values: [], //纵坐标数据
    workTime: "", //工作时间
});

//上周练琴统计数据
const szlqtjData = ref({
    times: [], //横坐标数据
    values: [], //纵坐标数据
});

//最新预约信息数据
const zxyyxxData = ref([]);

// 练琴排行榜
const lqphbData = ref([]);

// 排行榜图片
const topImgs = ref([top1Img, top2Img, top3Img]);

// 图表dom
const jrqfxxchart = ref(null);
const jrlqdtchart = ref(null);
const szlqtjchart = ref(null);

//自适应
const screenHeight = ref(window.innerHeight);
const setRem = () => {
    const danwei = screenHeight.value / 1080;
    const html = document.querySelector("html");
    if (html) html.style.fontSize = danwei + "px";
};

onMounted(async () => {
    // 每秒更新一次时间
    setInterval(updateTime, 1000);
    setTimeout(() => {
        startScroll();
    }, 1000);

    //动态适配
    window.addEventListener("resize", setRem);
    setRem();

    // 数据获取
    dataInit();
    setInterval(dataInit, 1000 * 60 * 10);

    setTimeout(() => {
        // 图表初始化
        jrqfxxchartInit();
        jrlqdtchartInit();
        szlqtjchartInit();
        startScroll();
    }, 500);
});

const dataInit = () => {
    getZxyyxxData();
    getLqphbData();
    getSzkctjData();
    getJrlqdtData();
    console.log("init");
};

const queryParams = reactive({
  pageNo: 1,
  pageSize: 100
})
async function getZxyyxxData() {
    zxyyxxData.value = await dashboardApi.getSubList(queryParams);
}

async function getLqphbData() {
    lqphbData.value = await dashboardApi.getSubRankList();
}

async function getSzkctjData() {
    const lastWeekData = await dashboardApi.getLastWeekData();
    szkctjData.value.total = lastWeekData.todayCourse; // 今日课程统计数
    szkctjData.value.values = lastWeekData.lastWeekCourseInfo; // 上周课程统计
    getJindu(szkctjData.value.total,[szkctjData.value.total,...szkctjData.value.values.map(v=>v.count)]);
    const sort = sortBy(szkctjData.value.values, "count");
    const counts = map(sort, "count");
    szkctjData.value.max = last(sortedUniq(counts)) || 0;

    const lastWeekSubInfo = lastWeekData.lastWeekSubInfo; // 上周练琴统计
    szlqtjData.value.times = <any>map(lastWeekSubInfo, "week");
    szlqtjData.value.values = <any>map(lastWeekSubInfo, "count");
}


function getJindu(inputNumber: number, numberArray: number[]) {
  // 检查数组是否为空
  if (numberArray.length === 0) {
    throw new Error('数组不能为空');
  }

  // 找出数组中的最大数
  const maxNumber = Math.max(...numberArray);

  // 计算比率并保留两位小数
  const ratio = (inputNumber / maxNumber).toFixed(2) * 100;

  // 将结果转换为数字并返回
//   console.log('maxNumber',maxNumber);
//   console.log('ratio：',ratio);
  szkctjData.value.jindu = ratio;
}

const generateHourlyArray = (timeRange) => {
    // 分割时间段字符串
    const [startTime, endTime] = timeRange.split("-");
    const format = "H:mm";

    const start = dayjs(startTime, format);
    const end = dayjs(endTime, format);

    const hourlyArray = [];
    hourlyArray.push(start.startOf("h").format(format));
    hourlyArray.push(end.startOf("h").format(format));
    // let currentHour = start.startOf("h");

    // while (currentHour.isBefore(end) || currentHour.isSame(end)) {
    //   hourlyArray.push(currentHour.format(format));
    //   currentHour = currentHour.add(1, "hour");
    // }
    console.log(hourlyArray);

    return hourlyArray;
};

async function getJrlqdtData() {
    const todayData = await dashboardApi.getTodayData();
    // 学校名字
    xyname.value = todayData.schoolName;
    // 今日预约数据
    middleData.value.jryy = todayData.hasSubscribed;
    middleData.value.ljsc = todayData.totalDuration;
    middleData.value.ywc = todayData.finishCount;
    middleData.value.yqx = todayData.cancelCount;
    // 今日琴房数据
    jrqfxxData.value.kx = todayData.roomStatusInfo.restRoom;
    jrqfxxData.value.sdz = todayData.roomStatusInfo.lockRoom;
    jrqfxxData.value.syz = todayData.roomStatusInfo.applyRoom;
    jrqfxxData.value.whz = todayData.roomStatusInfo.proptectRoom;
    jrqfxxData.value.total = sum([
        jrqfxxData.value.kx,
        jrqfxxData.value.sdz,
        jrqfxxData.value.syz,
        jrqfxxData.value.whz,
    ]);
    // 今日练琴动态
    // 获取琴房时间段
    const byKey = await configApi.getByKey("yxt.room.work-part");
    const todaySubList = todayData.todaySubList;
    jrlqdtData.value = {
        workTime: byKey.value,
        times: todaySubList.map((v) => `${v.time}:00`),
        values: <any>map(todaySubList, "count"),
    };
    // console.log(jrlqdtData);
    
    // console.log("11");
}

onBeforeUnmount(() => {
    // 在组件卸载时停止滚动
    cancelAnimationFrame(animationFrameId);
});

onUnmounted(() => {
    window.removeEventListener("resize", setRem);
    dispose();
});

//时间格式化
const formatTimeRange = (timestamp, duration) => {
    const start = dayjs(parseInt(timestamp));
    const end = start.add(duration, "minutes");
    return `${start.format("HH:mm")}~${end.format("HH:mm")}`;
};
// 数字格式化
const commafy = (num) => {
    if (num) {
        num = Math.floor(num);
        const parts = num.toString().split(".");
        parts[0] = parts[0].replace(/(\d)(?=(\d{3})+$)/g, "$1,");
        return parts.join(".");
    }
    return num;
};

// 今日琴房信息饼图初始化
let myJrqfxxchart;
const jrqfxxchartInit = () => {
    // 今日琴房信息饼图初始化
    if (!myJrqfxxchart) myJrqfxxchart = echarts.init(jrqfxxchart.value);
    myJrqfxxchart.setOption(jrqfxxchartInitOption());
};
const jrqfxxchartInitOption = () => {
    return {
        series: [
            {
                type: "pie",
                center: ["50%", "40%"],
                radius: ["50%", "70%"],
                data: [
                    {
                        value: jrqfxxData.value.kx,
                        name: "空闲琴房",
                        itemStyle: {color: "#FFE664"},
                    },
                    {
                        value: jrqfxxData.value.sdz,
                        name: "锁定中琴房",
                        itemStyle: {color: "#4D92FF"},
                    },
                    {
                        value: jrqfxxData.value.whz,
                        name: "维护中琴房",
                        itemStyle: {color: "#FA5652"},
                    },
                    {
                        value: jrqfxxData.value.syz,
                        name: "使用中琴房",
                        itemStyle: {color: "#44D5B5"},
                    },
                ],
                itemStyle: {
                    borderColor: "#auto",
                    borderWidth: 0,
                },
                label: {
                    width: 100,
                    alignTo: "edge",
                    position: "outer",
                    formatter: "{name|{b}}\n{time|{c}}",
                    minMargin: 20,
                    edgeDistance: "15%",
                    lineHeight: 20,
                    rich: {
                        time: {
                            fontSize: 12,
                            color: "inherit",
                            fontWeight: "bold",
                        },
                    },
                    truncate: false,
                    color: "inherit",
                },
                labelLine: {
                    length: 15,
                    length2: 0,
                    maxSurfaceAngle: 90,
                },
                labelLayout: (params) => {
                    const isLeft = params.labelRect.x < myJrqfxxchart.getWidth() / 2;
                    const points = params.labelLinePoints;
                    // Update the end point.
                    points[2][0] = isLeft
                        ? params.labelRect.x
                        : params.labelRect.x + params.labelRect.width;
                    return {
                        labelLinePoints: points,
                    };
                },
            },
        ],
    };
};
const jrqfxxchartUpdate = () => {
    if(myJrqfxxchart) myJrqfxxchart.setOption(jrqfxxchartInitOption());
};
// 今日练琴动态折线图初始化
let myJrlqdtchart;
const jrlqdtchartInit = () => {
    myJrlqdtchart = echarts.init(jrlqdtchart.value);
    myJrlqdtchart.setOption(jrlqdtchartInitOption());
};
const jrlqdtchartInitOption = () => {
    const rangData = generateHourlyArray(jrlqdtData.value.workTime).map((v) => ({
        time: `${v}`,
        value: 0,
    }));
    console.log(jrlqdtData.value.times);

    let data: any[] = [];
    if (jrlqdtData.value.times.length) {
        for (let i = 0; i < jrlqdtData.value.times.length; i++) {
            if (i == 0) {
                if (jrlqdtData.value.times[0] == rangData[0].time) {
                    data.push({
                        time: rangData[0].time,
                        value: jrlqdtData.value.values[0],
                    });
                    continue;
                } else {
                    data.push({
                        time: rangData[0].time,
                        value: rangData[0].value,
                    });
                    data.push({
                        time: jrlqdtData.value.times[0],
                        value: jrlqdtData.value.values[0],
                    });
                    continue;
                }
            }
            if (i == jrlqdtData.value.times.length - 1) {
                if (
                    jrlqdtData.value.times[jrlqdtData.value.times.length - 1] ==
                    rangData[1].time
                ) {
                    data.push({
                        time: rangData[jrlqdtData.value.times.length - 1].time,
                        value: jrlqdtData.value.values[jrlqdtData.value.times.length - 1],
                    });
                } else {
                    data.push({
                        time: jrlqdtData.value.times[i],
                        value: jrlqdtData.value.values[i],
                    });
                    data.push({
                        time: rangData[1].time,
                        value: rangData[1].value,
                    });
                    continue;
                }
            }
            data.push({
                time: jrlqdtData.value.times[i],
                value: jrlqdtData.value.values[i],
            });
        }
    } else {
        data = [...rangData];
    }

    console.log(jrlqdtData.value.times);
    console.log(data);

    return {
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "10%",
            left: "11%",
            width: "83%",
            height: "75%",
        },
        xAxis: {
            type: "category",
            data: data.map((v) => v.time),
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            show: true,
            axisLabel: {
                formatter: function (value) {
                    return value + "h"; // 将纵坐标的值后面添加 'h'
                },
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                },
            },
        },
        series: [
            {
                data: data.map((v) => v.value),
                type: "line",
                symbol: "circle", // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                symbolSize: 6, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(25, 137, 250, 1)",
                },
                itemStyle: {
                    color: "#FFF", // 设置折线的横线颜色
                    borderColor: "rgba(25, 137, 250, 1)",
                },
            },
        ],
    };
};
const jrlqdtchartUpdate = () => {
    if(myJrlqdtchart) myJrlqdtchart.setOption(jrlqdtchartInitOption());
};
// 今日练琴动态折线图初始化
let mySzlqtjchart;
const szlqtjchartInit = () => {
    mySzlqtjchart = echarts.init(szlqtjchart.value);
    mySzlqtjchart.setOption(szlqtjchartInitOption());
};
const szlqtjchartInitOption = () => {
    const data = [
        {time: "周一", value: 0},
        {time: "周二", value: 0},
        {time: "周三", value: 0},
        {time: "周四", value: 0},
        {time: "周五", value: 0},
        {time: "周六", value: 0},
        {time: "周日", value: 0},
    ];

    if (szlqtjData.value.times.length && data.length) {
        for (let i = 0; i < data.length; i++) {
            for (let j = 0; j < szlqtjData.value.times.length; j++) {
                if (data[i].time == szlqtjData.value.times[j]) {
                    data[i].value = szlqtjData.value.values[j];
                }
            }
        }
    }

    const gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
        {offset: 0, color: "rgba(68, 213, 181, 1)"}, // 渐变色起始颜色
        {offset: 1, color: "rgba(20, 178, 181, 1)"}, // 渐变色结束颜色
    ]);
    return {
        title: {
            text: "人/次",
            x: "right",
            textStyle: {
                color: "rgba(46, 200, 237, 0.55)",
                fontSize: 12,
            },
            top: -2,
            left: "88%",
        },
        grid: {
            show: false,
            borderColor: "rgba(46, 200, 237, 0.80)",
            top: "20%",
            left: "11%",
            width: "83%",
            height: "70%",
        },
        xAxis: {
            type: "category",
            data: data.map((v) => v.time),
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            axisTick: {
                show: false,
            },
        },
        yAxis: {
            type: "value",
            show: true,
            axisLabel: {
                textStyle: {
                    color: "rgba(46, 200, 237, 0.80)", // 设置横坐标文字颜色
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)",
                },
            },
            splitLine: {
                show: true, // 显示网格线
                lineStyle: {
                    color: "rgba(35, 54, 93, 1)", // 自定义网格线颜色
                },
            },
        },
        series: [
            {
                data: data.map((v) => v.value),
                type: "bar",
                symbol: "circle", // 设置坐标点形状，可以是'circle'、'rect'、'triangle'等
                barWidth: 35, // 设置坐标点大小
                lineStyle: {
                    color: "rgba(68, 213, 181, 1)",
                },
                itemStyle: {
                    color: gradientColor, // 设置折线的横线颜色
                },
                label: {
                    show: true,
                    position: "top",
                    offset: [0, 2],
                    fontSize: 14,
                    color: "rgba(68, 213, 181, 1)",
                },
            },
        ],
    };
};
const szlqtjchartUpdate = () => {
    if(mySzlqtjchart) mySzlqtjchart.setOption(szlqtjchartInitOption());
};
watch(
    jrqfxxData,
    () => {
        jrqfxxchartUpdate();
    },
    {deep: true}
);
watch(
    jrlqdtData,
    () => {
        jrlqdtchartUpdate();
    },
    {deep: true}
);
watch(
    szlqtjData,
    () => {
        szlqtjchartUpdate();
    },
    {deep: true}
);
// 销毁图表
const dispose = () => {
    console.log("销毁...");
    myJrlqdtchart.dispose();
    myJrqfxxchart.dispose();
    mySzlqtjchart.dispose();
};
</script>
<style lang="scss" scoped>
::v-deep {
    html {
        font-size: calc(100vh / 1080);
    }
}

.wrap {
    width: 100%;
    height: 1080rem;
    border-radius: 0 0 0 0;
    opacity: 1;
    border: 1px solid #707070;
    background: #0f1630;
    font-size: 24rem;
    position: relative;
    color: #ffffff;
    background-image: url("@/assets/imgs/sjkb/img_bground.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .head {
        width: 1850rem;
        height: 84rem;
        position: absolute;
        top: 5rem;
        left: calc(50% - 925rem);

        .xyname {
            height: 22rem;
            font-size: 22rem;
            font-weight: 500;
            color: #2ec8ed;
            line-height: 22rem;
            position: absolute;
            top: 10rem;
            left: 39rem;
        }

        .ptname {
            width: 290rem;
            height: 28rem;
            font-size: 25rem;
            font-weight: bold;
            text-align: center;
            color: #2ec8ed;
            line-height: 28rem;
            position: absolute;
            top: 30rem;
            left: 780rem;
        }

        .toptime {
            width: 310rem;
            height: 23rem;
            font-size: 22rem;
            font-weight: 500;
            color: #2ec8ed;
            line-height: 22rem;
            position: absolute;
            top: 10rem;
            right: 33rem;
        }
    }

    .middle {
        width: 1888rem;
        height: calc(100vh - 45rem - 11rem);
        position: absolute;
        top: 50rem;
        left: calc(50% - 944rem);
        background-image: url("@/assets/imgs/sjkb/img_bground2@2x.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .szkctj {
            width: 550rem;
            height: 334rem;
            position: absolute;
            top: 39rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .tj-list {
                width: 550rem;
                position: absolute;
                top: 58rem;
                left: 0;

                .szkctjd {
                    width: 550rem;
                    height: 30rem;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    margin-bottom: 6rem;

                    .xq {
                        width: 36rem;
                        height: 17rem;
                        font-size: 17rem;
                        line-height: 17rem;
                        font-weight: bold;
                        color: #ffffff;
                        margin-left: 30rem;
                    }

                    .tjt {
                        width: 360rem;
                        height: 13rem;
                        background: linear-gradient(270deg, #2ec8ed 0%, #1989fa 100%);
                        border-radius: 0px 0px 0px 0px;
                        opacity: 1;
                        margin-left: 12rem;
                    }

                    .tjnum {
                        height: 17rem;
                        font-size: 17rem;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 19rem;
                        margin-left: 12rem;
                        margin-right: 30rem;
                    }
                }
            }

            .tjtd {
                width: 489rem;
                height: 64rem;
                position: absolute;
                bottom: 26rem;
                left: 30rem;
                background-image: url("@/assets/imgs/sjkb/jrtjbg.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;

                .tjtdl {
                    width: 357rem;
                    height: 22rem;
                    border-radius: 0px 0px 0px 0px;
                    opacity: 1;
                    border: 1px solid rgba(255, 255, 255, 0.3);
                    position: absolute;
                    bottom: 21rem;
                    left: 20rem;

                    .tjtdl-num {
                        width: 238rem;
                        height: 22rem;
                        background: linear-gradient(270deg, #2ec8ed 0%, #1989fa 100%);
                        border-radius: 0px 0px 0px 0px;
                        opacity: 1;
                    }
                }

                .tjtdr {
                    width: 90rem;
                    height: 64rem;
                    position: absolute;
                    top: 0;
                    right: 15rem;

                    .tjtdr-num {
                        width: 100%;
                        height: 18rem;
                        position: absolute;
                        top: 14rem;
                        right: 0;
                        text-align: center;
                        font-size: 18rem;
                        font-weight: 500;
                        color: #2ec8ed;
                        line-height: 17rem;
                    }

                    .tjtdr-title {
                        width: 100%;
                        height: 15rem;
                        position: absolute;
                        bottom: 14rem;
                        right: 0;
                        font-size: 12rem;
                        font-weight: bold;
                        color: #ffffff;
                        line-height: 15rem;
                        text-align: center;
                    }
                }
            }
        }

        .jrqfxx {
            width: 550rem;
            height: 280rem;
            position: absolute;
            top: 393rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .chat-bgtitle {
                width: 140rem;
                height: 140rem;
                position: absolute;
                top: 89rem;
                left: calc(50% - 70rem);

                .bgnum {
                    width: 100%;
                    height: 28rem;
                    font-size: 28rem;
                    line-height: 28rem;
                    text-align: center;
                    color: #2ec8ed;
                    margin-top: 28rem;
                }

                .bgtitle {
                    width: 100%;
                    height: 14rem;
                    font-size: 14rem;
                    line-height: 14rem;
                    text-align: center;
                    margin-top: 10rem;
                }
            }
        }

        .jrqfxx-chart-box {
            width: 100%;
            height: 220rem;
            position: absolute;
            top: 60rem;
            display: flex;
            align-items: center;
            justify-content: center;

            .jrqfxx-chart {
                width: 100%;
                height: 220rem;
                background-color: rgba(255, 255, 255, 0);
            }
        }

        .tj-top {
            width: 100%;
            height: 22rem;
            position: absolute;
            top: 22rem;
            left: 0rem;

            .icon {
                width: 4rem;
                height: 14rem;
                position: absolute;
                top: 2rem;
                left: 22rem;
                background: #2ec8ed;
                border-radius: 0px 0px 0px 0px;
                opacity: 1;
            }

            .title {
                width: 108rem;
                height: 18rem;
                position: absolute;
                top: 0;
                left: 32rem;
                font-size: 17rem;
                font-weight: bold;
                color: #2ec8ed;
                line-height: 18rem;
            }

            .icon-r {
                width: 377rem;
                height: 14rem;
                position: absolute;
                top: 2rem;
                right: 22rem;
                background-image: url("@/assets/imgs/sjkb/img_title_decoration@2x.png");
                background-size: cover;
                background-repeat: no-repeat;
            }
        }

        .jrlqdt {
            width: 550rem;
            height: 292rem;
            position: absolute;
            top: 693rem;
            left: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .jrlqdt-chart-box {
                width: 100%;
                height: 208rem;
                position: absolute;
                bottom: 26rem;
                display: flex;
                align-items: center;
                justify-content: center;

                .jrlqdt-chart {
                    width: 100%;
                    height: 208rem;
                    background-color: rgba(255, 255, 255, 0);
                }
            }
        }

        .jryy {
            width: 388rem;
            position: absolute;
            top: 110rem;
            left: calc(50% - 194rem);
            display: flex;
            flex-flow: column nowrap;
            align-items: center;

            .jrnum {
                width: 100%;
                height: 70rem;
                font-size: 49rem;
                font-weight: bold;
                color: #80e6ff;
                line-height: 70rem;
                text-align: center;
            }

            .jricon {
                width: 188rem;
                height: 79rem;
                position: absolute;
                top: 32rem;
                left: calc(50% - 94rem);
            }

            .jrtitle {
                width: 100%;
                height: 22rem;
                margin-top: 58rem;
                font-size: 22rem;
                font-weight: bold;
                color: #ffffff;
                line-height: 22rem;
                text-align: center;
            }
        }

        .jryy-3 {
            width: 538rem;
            position: absolute;
            top: 345rem;
            left: calc(50% - 269rem);
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-between;
            align-items: center;

            .ljsc {
                width: 142rem;
                position: relative;

                .ljnum {
                    width: 100%;
                    height: 52rem;
                    font-size: 36rem;
                    font-weight: 500;
                    color: #ffa53b;
                    line-height: 52rem;
                    text-align: center;
                }

                .ljicon {
                    width: 142rem;
                    height: 59.7rem;
                    position: absolute;
                    top: 21rem;
                }

                .ljtitle {
                    width: 100%;
                    height: 16rem;
                    font-size: 16rem;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 16rem;
                    text-align: center;
                    position: absolute;
                    top: 93rem;
                }
            }

            .ywc {
                width: 142rem;
                position: relative;

                .ywcnum {
                    width: 100%;
                    height: 52rem;
                    font-size: 36rem;
                    font-weight: 500;
                    color: rgba(209, 138, 255, 1);
                    line-height: 52rem;
                    text-align: center;
                }

                .ywcicon {
                    width: 142rem;
                    height: 59.7rem;
                    position: absolute;
                    top: 21rem;
                }

                .ywctitle {
                    width: 100%;
                    height: 16rem;
                    font-size: 16rem;
                    font-weight: bold;
                    color: #fff;
                    line-height: 16rem;
                    text-align: center;
                    position: absolute;
                    top: 93rem;
                }
            }

            .yqx {
                width: 142rem;
                position: relative;

                .yqxnum {
                    width: 100%;
                    height: 52rem;
                    font-size: 36rem;
                    font-weight: 500;
                    color: #ffa53b;
                    line-height: 52rem;
                    text-align: center;
                }

                .yqxicon {
                    width: 142rem;
                    height: 59.7rem;
                    position: absolute;
                    top: 21rem;
                }

                .yqxtitle {
                    width: 100%;
                    height: 16rem;
                    font-size: 16rem;
                    font-weight: bold;
                    color: #ffffff;
                    line-height: 16rem;
                    text-align: center;
                    position: absolute;
                    top: 93rem;
                }
            }
        }

        .dqbg {
            width: 702rem;
            height: 196rem;
            position: absolute;
            top: 477rem;
            left: calc(50% - 351rem);
        }

        .szlqtj {
            width: 660rem;
            height: 292rem;
            position: absolute;
            left: calc(50% - 330rem);
            top: 693rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .szlqtj-chart-box {
                width: 100%;
                height: 240rem;
                position: absolute;
                top: 42rem;

                .szlqtj-chart {
                    width: 100%;
                    height: 240rem;
                }
            }
        }

        .zxyyxx {
            width: 550rem;
            height: 323rem;
            position: absolute;
            top: 39rem;
            right: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .zxyyxx-box {
                width: 100%;
                height: 236rem;
                position: absolute;
                top: 62rem;
                display: flex;
                flex-flow: column nowrap;
                font-size: 14rem;
                line-height: 14rem;
                color: #ffffff;
                overflow: auto;

                .zxyyxx-item {
                    width: 100%;
                    height: 16rem;
                    display: flex;
                    flex-flow: row nowrap;
                    margin-bottom: 21rem;

                    .item-icon {
                        width: 16rem;
                        height: 16rem;
                        margin-left: 30rem;
                        margin-right: 12rem;
                        background-image: url("@/assets/imgs/sjkb/icon_time@2x.png");
                        background-size: 100% 100%;
                        background-repeat: no-repeat;
                    }

                    .item-text {
                        width: 384rem;

                        span {
                            color: rgba(46, 200, 237, 1);
                        }
                    }

                    .item-time {
                        margin-right: 30rem;
                        color: rgba(255, 255, 255, 0.8);
                    }
                }
            }
        }

        .lqphb {
            width: 550rem;
            height: 603rem;
            position: absolute;
            top: 393rem;
            right: 44rem;
            background-image: url("@/assets/imgs/sjkb/img_skztj_bground@2x.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;

            .lqphb-box {
                width: 100%;
                height: 530rem;
                position: absolute;
                top: 64rem;
                display: flex;
                flex-flow: column nowrap;
                color: #ffffff;
                overflow: hidden;

                .lqphb-item {
                    width: 100%;
                    height: 36rem;
                    display: flex;
                    flex-flow: row nowrap;
                    align-items: center;
                    margin-bottom: 17rem;

                    .item-index {
                        width: 36rem;
                        height: 36rem;
                        margin-left: 52rem;
                        font-size: 15rem;
                        line-height: 36rem;
                        text-align: center;
                    }

                    .item-avatar {
                        width: 36rem;
                        height: 36rem;
                        margin-left: 52rem;
                        border-radius: 50%;
                        overflow: hidden;
                    }

                    .item-name {
                        width: 180rem;
                        height: 15rem;
                        font-size: 15rem;
                        line-height: 15rem;
                        margin-left: 63rem;
                    }

                    .item-num {
                        height: 20rem;
                        margin-left: 5rem;
                        font-size: 20rem;
                        line-height: 20rem;
                        color: rgba(46, 200, 237, 1);
                    }
                }
            }
        }
    }

    ::-webkit-scrollbar {
        width: 0px;
    }

    img {
        width: 100%;
        height: 100%;
    }
}
</style>
